<template>
  <ul class="footer-box" @click="color_">
    <li>
      <span class="iconfont icon-liwu" @click="$router.push('/home/center')"></span><br/>
      首页
    </li>
    <li @click="$router.push('/shop')"> <span class="iconfont icon-yejikanban"></span><br/>
      分类</li>
    <li @click="$router.push('/shoppingcar')"> <span class="iconfont icon-dianziqiajuan"></span><br/>
      购物车</li>
    <li @click="$router.push('/my')"> <span class="iconfont icon-fenxiang"></span><br/>
      我的</li>
  </ul>
</template>

<script>
export default {
    name:"FooterBar",
    methods:{
      color_(e){
        if(e.className == "LI"){
          e.style.color="red"
        }
      }
    }

}
</script>

<style scoped>
  @import url(../assets/iconfonts/iconfont.css);

.footer-box{
  width: 100%;
  height: 3.125rem;
  /* border:1px solid black; */
  border-top:1px solid gray;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.footer-box li{
  flex:1;
  /* border:1px solid red; */
  text-align: center;
  height:100%;
  
  
}


</style>